/*
 * @文件描述: 头部搜索框
 * @公司: 山东大学信息学院
 * @作者: 李洪文
 * @Date: 2019-11-11 11:27:19
 * @LastEditors: 李洪文
 * @LastEditTime: 2019-11-13 16:27:07
 */

import React from 'react';
import { StyleSheet, View } from 'react-native';
import { SearchInput } from 'teaset';
import { size, colors } from '@/config';

const { px } = size;

interface SearchHeaderProps {
  boder?: boolean;
  left: React.ReactElement;
  right: React.ReactElement;
}

const SearchHeader: React.FC<SearchHeaderProps> = props => {
  const { boder, left, right } = props;
  return (
    <View style={[styles.search, boder && styles.borderStyle]}>
      {left}
      <SearchInput
        style={styles.inputStyle}
        placeholder="请输入"
        placeholderTextColor={colors.markGray}
        iconSize={18}
        inputStyle={{ fontSize: px(14) }}
      />
      {right}
    </View>
  );
};

export default SearchHeader;

const styles = StyleSheet.create({
  search: {
    height: px(46),
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  borderStyle: {
    borderBottomColor: colors.borderColor,
    borderBottomWidth: 1,
  },
  inputStyle: {
    height: px(36),
    width: px(260),
    marginHorizontal: px(15),
    borderRadius: px(18),
    backgroundColor: '#EDEDED',
    borderWidth: 0,
  },
});
